<template>
  <!-- 外层滚动容器 -->
  <div class="h-screen overflow-y-auto bg-gray-50 pb-20">
    
    <!-- 顶部导航 固定-->
    <div class="sticky top-0 z-10">
      <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
        商家信息
      </header>
    </div>

    <!-- 店铺信息 -->
    <div class="bg-white">
      <div class="flex flex-col items-center p-4">
        <!-- 店铺图片 -->
        <div class="w-35 h-30 sm:w-20 sm:h-20 mr-3 flex-shrink-0">
          <img
            src="@/assets/images/sj01.png"
            class="w-full h-full object-cover"
          />
        </div>
        <!-- 店铺名称、信息 -->
        <div class="flex flex-col items-center">
          <span class="text-xl font-bold">万家饺子（软件园E18店）</span>
          <span class="text-sm font-normal text-gray-600">¥15起送 | ¥3元配送</span>  
          <span class="text-sm font-normal text-gray-600 ml-2">各种饺子</span>
        </div>
      </div>

      <!-- 店铺菜单 -->
      <div 
        v-for="(dish, index) in dishes" 
        :key="index" 
        class="border-b last:border-b-0 d-border"
      >
        <div class="flex p-4">
          <!-- 左侧菜品图片 -->
          <div class="w-20 h-20 sm:w-20 sm:h-20 mr-3 flex-shrink-0">
            <img 
              :src="dish.icon" 
              class="w-full h-full object-cover"
            />
          </div>
          
          <!-- 右侧菜品信息 -->
          <div class="flex-1 min-w-0">
            <div class="space-y-2">
              <!-- 菜品名称 -->
              <div class="text-base sm:text-lg font-semibold text-gray-800 truncate">{{ dish.name }}</div>
              <!-- 菜品分类 -->
              <div class="text-xs text-gray-500 mt-1">{{ dish.category || '新鲜猪肉' }}</div>
              <!-- 菜品价格和数量控件 -->
              <div class="flex justify-between items-center">
                <span class="text-sm font-semibold text-gray-700">¥{{ dish.price || '15' }}</span>
                <div class="flex items-center space-x-2 ">
                  <button 
                    @click="decreaseDish(dish)"
                    class="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 border-0"
                    :disabled="!dish.count || dish.count <= 0"
                  >
                    <span class="text-sm">-</span>
                  </button>
                  <span class="text-sm w-6 text-center">{{ dish.count || 0 }}</span>
                  <button 
                    @click="increaseDish(dish)"
                    class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-white border-0"
                  >
                    <span class="text-sm">+</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部结算栏 -->
    <div class="fixed w-full h-20 bg-white bottom-0 left-0 right-0 border-0">
    <div class="flex h-full">
        
        <!-- 左侧灰色部分 -->
        <div class="flex flex-1 items-center bg-[#444] px-4 ">

        <!-- 购物车图标及红色数量角标 -->
        <div class="relative w-25 h-25">
            <!-- 外圈暗圆 -->
            <div class="w-20 h-20 rounded-full bg-[#2d2d2d] flex items-center justify-center shadow-md">
            <!-- 内圈蓝圆 -->
            <div class="w-16 h-16 rounded-full bg-[#2196f3] flex items-center justify-center">
                <!-- 购物车图标（加大） -->
                <i class="fa-solid fa-cart-shopping text-white text-2xl"></i>
            </div>
            </div>

            <!-- 红色角标（数字） -->
            <span v-if="totalCount > 0"
                class="absolute -top-1 right-6 bg-red-500 text-white text-sm w-5 h-5 rounded-full 
                        flex items-center justify-center font-bold shadow-md scale-110 z-50">
            {{ totalCount }}
            </span>
        </div>

        <!-- 金额与配送信息 -->
        <div class="flex flex-col  ml-4">
            <span class="text-white text-xl">¥{{ totalPrice.toFixed(2) }}</span>
            <span class="text-white text-sm">另需配送费3元</span>
        </div>
        </div>

        <!-- 右侧绿色按钮 -->
        <button 
        @click="goToCheckout"
        class="w-35 h-full bg-[#38ca73] text-white text-xl font-bold flex items-center justify-center"
        :disabled="totalCount <= 0"
        :class="{ 'opacity-50 cursor-not-allowed': totalCount <= 0 }"
        >
        去结算
        </button>

    </div>
    </div>

  </div>
</template>

<script setup>
  import 'swiper/css/autoplay';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import 'swiper/css/navigation';
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import usedishes from '@/hooks/usedishes'

  const router = useRouter();
  const { dishes } = usedishes();

  // 初始化菜品数量
  dishes.value = dishes.value.map(dish => ({
    ...dish,
    count: 0
  }));

  // 增加菜品数量
  const increaseDish = (dish) => {
    dish.count = (dish.count || 0) + 1;
  };

  // 减少菜品数量
  const decreaseDish = (dish) => {
    if (dish.count > 0) {
      dish.count -= 1;
    }
  };

  // 计算总数量
  const totalCount = computed(() => {
    return dishes.value.reduce((sum, dish) => sum + (dish.count || 0), 0);
  });

  // 计算总价格（不含配送费）
  const totalPrice = computed(() => {
    return dishes.value.reduce((sum, dish) => sum + (dish.price || 0) * (dish.count || 0), 0);
  });

  // 跳转到结算页面，传递菜品信息和总价
  const goToCheckout = () => {
    const selectedDishes = dishes.value.filter(dish => dish.count > 0);
    router.push({ 
      path: '/payment', 
      query: { 
        selectedDishes: JSON.stringify(selectedDishes), 
        totalPrice: totalPrice.value 
      } 
    });
  };
</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
/* 分割线 */
.d-border {
  border-bottom: 1px solid rgb(165, 163, 163);
}

</style>